<template>
  <div class="home-container">
    <div class="top">
      <div class="left-charts">
        <div class="task">
          <div class="title">
            <span class="sub-title common">运营人员（当天）</span>
          </div>
          <div class="content">
            <div class="total item">
              <span class="num">{{ taskReportInfo.total }}</span
              ><span class="mini-title">工单总数（个）</span>
            </div>
            <div class="done item">
              <span class="num">{{ taskReportInfo.completedTotal }}</span
              ><span class="mini-title">完成工单（个）</span>
            </div>
            <div class="pending item">
              <span class="num">{{ taskReportInfo.cancelTotal }}</span
              ><span class="mini-title">拒绝工单（个）</span>
            </div>
            <div class="cancel item">
              <span class="num">{{ taskReportInfo.workerCount }}</span
              ><span class="mini-title">运营人员数（个）</span>
            </div>
          </div>
        </div>
        <div class="sales">
          <div class="title">
            <span class="sub-title common">运维人员（当天）</span>
          </div>
          <div class="content">
            <div class="order item">
              <span class="num">{{ taskMentenanceInfo.total }}</span>
              <span class="mini-title">工单总数（个）</span>
            </div>
            <div class="price item">
              <span class="num">{{ taskMentenanceInfo.completedTotal }}</span
              ><span class="mini-title">完成工单（个）</span>
            </div>
            <div class="price item">
              <span class="num">{{ taskMentenanceInfo.cancelTotal }}</span
              ><span class="mini-title">拒绝工单（个）</span>
            </div>
            <div class="price item">
              <span class="num">{{ taskMentenanceInfo.workerCount }}</span
              ><span class="mini-title">运维人员数（个）</span>
            </div>
          </div>
        </div>
        <div class="sales-data">
          <div class="title">
            <div class="left">
              <span class="sub-title">工单状态</span>
            </div>
            <div class="right">

            <el-date-picker
              v-model="date"
              size="small"
              style="width:250px"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <div class="tab">
              <div
                class="tab-item"
                :class="{ active: currentOption === 'week' }"
                @click="currentOption = 'week'"
              >
                周
              </div>
              <div
                class="tab-item"
                :class="{ active: currentOption === 'month' }"
                @click="currentOption = 'month'"
              >
                月
              </div>
              <div
                class="tab-item"
                :class="{ active: currentOption === 'year' }"
                @click="currentOption = 'year'"
              >
                年
              </div>
            </div>
            </div>
          </div>
          <div class="content">
            <div class="null">
              <img src="../../assets/home/null.png" alt="" />
              <span>暂无数据</span>
            </div>
          </div>
        </div>
        <div class="rank">
          <div class="title">
            <span>人效排名（月度）</span>
            <el-select
              v-model="regionId"
              @change="changeFn"
              size="small"
              style="width: 100px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in regionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="tab">
            <div
              class="tab-item"
              :class="{ active: currentUser === '运营人员' }"
              @click="(currentUser = '运营人员'), (isRepair = false)"
            >
              运营人员
            </div>
            <div
              class="tab-item"
              :class="{ active: currentUser === '运维人员' }"
              @click="(currentUser = '运维人员'), (isRepair = true)"
            >
              运维人员
            </div>
          </div>
          <div class="body" v-if="workRank.length">
            <el-row
              class="row"
              type="flex"
              v-for="(item, index) in workRank"
              :key="index"
            >
              <el-col :class="`rank top${index + 1}`"
                ><span>{{ index + 1 }}</span></el-col
              >
              <el-col class="name">{{ item.userName }}</el-col>
              <el-col class="count">{{ item.workCount }}单</el-col>
            </el-row>
          </div>
          <div class="content" v-else>
            <div class="null">
              <img src="../../assets/home/null.png" alt="" />
              <span>暂无数据</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { todayRangeApiSecF, monthRangeApi, weekRangeApi, dateRangeApi, yearRangeApi } from "@/utils/time";
import { gettaskReportInfoApi, getWorkTop10Api } from "@/api/user";
import { searchRegionApi } from "@/api/node";
export default {
  data() {
    return {
      currentOption: "week",
      currentUser: "运营人员",
      regionId: 0,
      date:[weekRangeApi.start, weekRangeApi.end],
      taskReportInfo: [],
      taskMentenanceInfo: [],
      regionList: [],
      workRank: [],
      isRepair: false,
      pageParams: {
        pageIndex: 1,
        pageSize: 1000,
      },
    };
  },
  created() {
    this.gettaskReportInfo();
    this.searchRegion();
    this.getWorkTop10();
  },
  methods: {
    async gettaskReportInfo() {
      const res = await gettaskReportInfoApi({
        start: todayRangeApiSecF.start,
        end: todayRangeApiSecF.end,
      });
      this.taskReportInfo = res[0];
      this.taskMentenanceInfo = res[1];
    },
    async searchRegion() {
      const res = await searchRegionApi(this.pageParams);
      this.regionList = res.currentPageRecords;
      this.regionList.unshift({ id: 0, name: "全部" });
    },
    async getWorkTop10() {
      this.workRank = await getWorkTop10Api({
        start: monthRangeApi.start,
        end: monthRangeApi.end,
        isRepair: this.isRepair,
        regionId: this.regionId,
      });
    },
    changeFn() {
      this.getWorkTop10();
    },
  },
  watch: {
    currentOption(newVal,oldVal){
      if(newVal === 'week'){
        this.date = [weekRangeApi.start, weekRangeApi.end]
      } else if (newVal === 'month'){
        this.date = [dateRangeApi.start, dateRangeApi.end]
      } else {
        this.date = [yearRangeApi.start, yearRangeApi.end]
      }
    },
    currentUser(newVal, oldVal) {
      if (newVal === "运维人员") {
        this.getWorkTop10();
      } else {
        this.getWorkTop10();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  background-color: #f8fafd;
  .top {
    display: flex;
    padding-top: 10px;
    .left-charts {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      margin-right: 20px;
      .rank {
        position: relative;
        background-color: #fff;
        width: 280px;
        height: 542px;
        border-radius: 20px;
        padding: 15px;
        .title {
          display: flex;
          justify-content: space-around;
          align-items: center;
          span {
            margin-right: 5px;
          }
          font-size: 16px;
          color: #333;
          font-weight: 700;
          margin-right: 10px;
        }
        .tab {
          cursor: pointer;
          width: 200px;
          height: 35px;
          display: flex;
          margin: 15px auto;
          justify-content: space-between;
          align-items: center;
          background-color: #f7fbff;
          border-radius: 10px;
          padding: 5px 10px;
          .tab-item {
            width: 180px;
            height: 25px;
            font-size: 14px;
            color: #9ca3b4;
            text-align: center;
            line-height: 25px;
            padding: 0 10px;
          }
          .active {
            color: #333;
            background-color: #fff;
            font-weight: 600;
            border-radius: 7px;
            box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
          }
        }
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .null {
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              margin-bottom: 25px;
            }
            span {
              font-size: 14px;
              color: #20232a;
            }
          }
        }
        .body {
          .row {
            margin: 25px 0;
          }
          .top1 {
            color: #8e5900;
            background: url("../../assets/home/no.1.png") no-repeat;
          }
          .top2 {
            color: #494949;
            background: url("../../assets/home/no.2.png") no-repeat;
          }
          .top3 {
            color: #cf6d3d;
            background: url("../../assets/home/no.3.png") no-repeat;
          }
          .top4,
          .top5,
          .top6,
          .top7,
          .top8,
          .top9,
          .top10 {
            color: #e9b499;
            background: url("../../assets/home/label.png") no-repeat;
            background-position: 2px 0;
          }
          .rank {
            height: 20px;
            padding-right: 5px;
            padding-left: 7px;
            width: 80px;
            padding-top: 0;
            font-size: 12px;
          }
          .name {
            color: #333;
            font-size: 14px;
          }
          .count {
            color: #737589;
            font-size: 15px;
            text-align: right;
          }
        }
      }
      .task {
        width: 50%;
        height: 166px;
        padding: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
        background-color: #e9f3ff;
        background-image: url("../../assets/user/1.png"),
          url("../../assets/user/2.png");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, calc(100% - 12px) 100%;
        border-radius: 20px;
        .title {
          .sub-title {
            font-size: 16px;
            color: #333;
            font-weight: 700;
            margin-right: 10px;
          }
          .time {
            font-size: 13px;
            color: #999;
          }
        }
        .content {
          display: flex;
          justify-content: space-between;
          padding-left: 15px;
          .item {
            width: 112px;
            height: 107px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .num {
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              line-height: 50px;
              color: #072074;
              text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
            }
            .mini-title {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #91a7dc;
              line-height: 17px;
            }
          }
        }
      }
      .sales {
        width: 48%;
        height: 166px;
        padding: 20px;
        background: #fbefe8 url("../../assets/user/3.png") no-repeat
          calc(100% - 12px) 100%;
        border-radius: 20px;
        .title {
          .sub-title {
            font-size: 16px;
            color: #333;
            font-weight: 700;
            margin-right: 10px;
          }
        }
        .content {
          display: flex;
          justify-content: space-around;
          padding-left: 15px;
          .item {
            width: 112px;
            height: 107px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .num {
              height: 50px;
              font-size: 36px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              line-height: 50px;
              color: #ff5757;
              text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
            }
            .mini-title {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #de9690;
              line-height: 17px;
            }
          }
        }
      }
      .sales-data {
        position: relative;
        width: 919px;
        height: 542px;
        background-color: #fff;
        border-radius: 20px;
        padding: 20px;
        margin-right: 15px;
        .title {
          display: flex;
          justify-content: space-between;
          .sub-title {
            font-size: 16px;
            color: #333;
            font-weight: 700;
            margin-right: 10px;
          }
          .right {
            display: flex;
            align-items: center;
          .tab {
            cursor: pointer;
            width: 120px;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f7fbff;
            border-radius: 10px;
            padding: 5px 10px;
            margin-left: 15px;
            .tab-item {
              width: 37px;
              height: 25px;
              font-size: 14px;
              color: #9ca3b4;
              text-align: center;
              line-height: 25px;
              padding: 0 10px;
            }
            .active {
              color: #333;
              background-color: #fff;
              font-weight: 600;
              border-radius: 7px;
              box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
            }
          }
          }
        }
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .null {
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              margin-bottom: 25px;
            }
            span {
              font-size: 14px;
              color: #20232a;
            }
          }
        }
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20px;
    .left {
      width: 710px;
      height: 353px;
      padding: 20px;
      background-color: #fff;
      border-radius: 20px;
      margin-right: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        color: #333;
        font-size: 16px;
        font-weight: 700;
        .el-icon-more {
          color: #5f84ff;
          cursor: pointer;
        }
      }
    }
    .right {
      position: relative;
      width: 502px;
      height: 353px;
      background-color: #fff;
      border-radius: 20px;
      padding: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        color: #333;
        font-size: 16px;
        font-weight: 700;
        .el-icon-more {
          color: #5f84ff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
